<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>用户反馈</title>
    <meta name="description" content="这是一个 index 页面">
    <meta name="keywords" content="index">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <link rel="icon" type="image/png" href="/resources/i/favicon.png">
    <link rel="apple-touch-icon-precomposed" href="/resources/i/app-icon72x72@2x.png">
    <meta name="apple-mobile-web-app-title" content="Amaze UI"/>
    <script src="/resources/js/echarts.min.js"></script>
    <link rel="stylesheet" href="/resources/css/amazeui.min.css"/>
    <link rel="stylesheet" href="/resources/css/amazeui.datatables.min.css"/>
    <link rel="stylesheet" href=/resources/css/amazeui.chosen.css"/>
    <link rel="stylesheet" href="/resources/css/app.css">
    <script src="/resources/js/jquery.min.js"></script>
    <script src="/resources/js/amazeui.chosen.min.js"></script>
    <script src="/resources/jsutlis/DateFormat.js"></script>
</head>

<body data-type="widgets">
<script src="/resources/js/theme.js"></script>
<div class="am-g tpl-g">

    <%--头部开始--%>
    <%@include file="header.jsp" %>
    <%--头部结束--%>

    <!-- 内容区域 -->
    <div class="tpl-content-wrapper">
        <div class="row-content am-cf">
            <div class="row">
                <div class="am-u-sm-12 am-u-md-12 am-u-lg-12">
                    <div class="widget am-cf">
                        <%-- 消息 --%>
                        <div class="container-fluid am-cf">
                            <div class="row">
                                <div class="am-u-sm-12 am-u-md-12 am-u-lg-9">
                                    <div class="page-header-heading"><span
                                            class="am-icon-smile-o page-header-heading-icon"></span> 用户反馈
                                        <small>User FeedBack</small>
                                    </div>
                                    <p class="page-header-description">用户反馈信息</p>
                                </div>
                                <div class="am-u-lg-3 tpl-index-settings-button">
                                    <%--<button type="button" class="page-header-button"><span class="am-icon-paint-brush"></span> 设置</button>--%>
                                </div>
                            </div>
                        </div>
                        <%-- 表格 --%>
                        <div class="widget-body  am-fr">
                            <div class="am-u-sm-12 am-u-md-6 am-u-lg-6">
                                <div class="am-form-group">
                                    <div class="am-btn-toolbar">
                                        <div class="am-btn-group am-btn-group-xs">
                                            <%--<button type="button" class="am-btn am-btn-default am-btn-success"--%>
                                                    <%--onclick="hideBtn()"--%>
                                                    <%--data-am-modal="{target: '#addModel', width: 900}"><span--%>
                                                    <%--class="am-icon-plus"></span> 添加用户--%>
                                            <%--</button>--%>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- 右上角搜索框 -->
                            <div class="am-u-sm-12 am-u-md-6 am-u-lg-3">
                                <div class="am-form-group tpl-table-list-select">
                                    <%--<select id="searchType" data-am-selected="{btnSize: 'sm'}">--%>
                                        <%--<option value="userName">用户名</option>--%>
                                    <%--</select>--%>
                                </div>
                            </div>
                            <div class="am-u-sm-12 am-u-md-12 am-u-lg-3">
                                <div class="am-input-group am-input-group-sm tpl-form-border-form cl-p">
                                    <%--<input type="text" class="am-form-field" id="searchContent">--%>
                                    <%--<span class="am-input-group-btn">--%>
                                            <%--<button class="am-btn am-btn-default am-btn-success tpl-table-list-field am-icon-search"--%>
                                                    <%--id="searchBtn" type="button"></button>--%>
                                        <%--</span>--%>
                                </div>
                            </div>

                            <!-- 用户表开始 -->
                            <div class="am-u-sm-12 tableDiv">
                                <table width="100%" class="am-table am-table-compact am-table-striped tpl-table-black">
                                    <thead>
                                    <tr>

                                        <th class="am-text-center">用户名</th>
                                        <th class="am-text-center">用户电话</th>
                                        <th class="am-text-center">反馈详情</th>
                                        <th class="am-text-center">反馈时间</th>
                                        <th class="am-text-center">操作</th>
                                    </tr>
                                    </thead>
                                    <tbody class="am-text-center">
                                    <c:forEach items="${pageInfo.list }" var="u">
                                        <tr>

                                            <td>${u.username}</td>
                                            <td>${u.phone}</td>
                                            <td style="width: 50%;min-width:300px ">${u.details}</td>

                                            <td><fmt:formatDate type="both" dateStyle="medium" timeStyle="medium" value="${u.caeatetime}" /></td>

                                            <td>
                                                <c:if test="${u.status == 0}">
                                                <button type="button" class="am-btn am-btn-xs am-btn-secondary"
                                                        onclick="updateFeedBack('${u.id}')">标记为已读
                                                </button>
                                                </c:if>

                                                    <%--<button type="button" class="am-btn am-btn-xs am-btn-danger"--%>
                                                    <%--onclick="delEmpFun('${u.id}')"&lt;%&ndash;data-am-modal="{target: '#delEmpConfirm'}"&ndash;%&gt;>--%>
                                                    <%--<span class="am-icon-trash"></span> 删除--%>
                                                    <%--</button>--%>
                                                <%--<c:if test="${u.state == 0}">--%>
                                                    <%--<button type="button" class="am-btn am-btn-xs am-btn-danger"--%>
                                                            <%--onclick="changeActive('${u.id}')"&lt;%&ndash;data-am-modal="{target: '#delEmpConfirm'}"&ndash;%&gt;>--%>
                                                        <%--<span class="am-icon-trash"></span> 点击激活--%>
                                                    <%--</button>--%>
                                                <%--</c:if>--%>

                                            </td>
                                        </tr>
                                    </c:forEach>
                                    <!-- more data -->
                                    </tbody>
                                </table>
                            </div>
                            <!-- 用户表结束 -->

                            <!-- 分页开始 -->
                            <div class="am-u-lg-12 am-cf pageInfoTotal">

                                <!-- 分页文字信息，其中分页信息都封装在pageInfo中 -->
                                <div class="col-md-6 ">
                                    当前第：${pageInfo.pageNum }页，总共：${pageInfo.pages }页，总共：${pageInfo.total }条记录
                                </div>
                                <div class="am-fr">
                                    <ul class="am-pagination tpl-pagination">
                                        <!-- 首页 -->
                                        <li><a href="/feed/page?pn=1">首页</a></li>
                                        <!-- 上一页 -->
                                        <c:if test="${pageInfo.hasPreviousPage }">
                                            <li>
                                                <a href="/feed/page?pn=${pageInfo.pageNum-1 }"
                                                   aria-label="Previous">
                                                    <span aria-hidden="true">&laquo;</span>
                                                </a>
                                            </li>
                                        </c:if>
                                        <!-- 循环遍历连续显示的页面，若是当前页就高亮显示，并且没有链接 -->
                                        <c:forEach items="${pageInfo.navigatepageNums }" var="page_Num">
                                            <c:if test="${page_Num == pageInfo.pageNum }">
                                                <li class="am-active"><a
                                                        href="/feed/page?pn=${page_Num }">${page_Num }</a>
                                                </li>
                                            </c:if>
                                            <c:if test="${page_Num != pageInfo.pageNum }">
                                                <li>
                                                    <a href="/feed/page?pn=${page_Num }">${page_Num }</a>
                                                </li>
                                            </c:if>
                                        </c:forEach>
                                        <!-- 下一页 -->
                                        <c:if test="${pageInfo.hasNextPage }">
                                            <li>
                                                <a href="/feed/page?pn=${pageInfo.pageNum+1 }"
                                                   aria-label="Next">
                                                    <span aria-hidden="true">&raquo;</span>
                                                </a>
                                            </li>
                                        </c:if>
                                        <!-- 末页 -->
                                        <li><a href="/feed/page?pn=${pageInfo.pages }">末页</a></li>
                                    </ul>
                                </div>
                            </div>
                            <!-- 分页结束 -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

        <div class="am-modal am-modal-confirm" tabindex="-1" id="my-confirm">
            <div class="am-modal-dialog">
                <div class="am-modal-hd">提示信息</div>
                <div class="am-modal-bd">
                    确定标记为已读吗？
                </div>
                <div class="am-modal-footer">
                    <span class="am-modal-btn" data-am-modal-cancel>取消</span>
                    <span class="am-modal-btn" data-am-modal-confirm>确定</span>
                </div>
            </div>
        </div>

</div>

<script src="/resources/js/amazeui.min.js"></script>
<script src="/resources/js/amazeui.datatables.min.js"></script>
<script src="/resources/js/dataTables.responsive.min.js"></script>
<script src="/resources/js/app.js"></script>
<script src="/resources/jsutlis/fileutli.js"></script>
<script src="/resources/js/userinfo.form.validation.js"></script>
<script>
  function updateFeedBack(id){
      $('#my-confirm').modal({
          relatedTarget: this,
          onConfirm: function(options) {
              var formData = new FormData();
              formData.append('id', id);
              formData.append('status', 1);
              var url = "/feed/update";
              $.ajax({
                  url: url,
                  type: 'POST',
                  cache: false,
                  data: formData,
                  processData: false,
                  contentType: false
              }).done(function (res) {
                  console.log(res);
                  if(res.success){
                      window.location.reload();
                  }else {
                      alert("标记失败");
                  }
              }).fail(function (res) {

              });
          },
          // closeOnConfirm: false,
          onCancel: function() {

          }
      });
  }
</script>
</body>

</html>